<template>
  <div class="app-container home">
    <!-- 1. 顶部轮播图区域 -->
    <el-carousel height="400px" indicator-position="outside">
      <el-carousel-item v-for="(item, index) in banners" :key="index">
        <img :src="item.image" class="banner-image" alt="Banner">
        <div class="banner-title">{{ item.title }}</div>
      </el-carousel-item>
    </el-carousel>

    <!-- 2. 核心功能卡片区域 -->
    <el-row :gutter="20" class="function-cards">
      <el-col 
        v-for="(card, index) in functionCards" 
        :key="index" 
        :xs="24" :sm="12" :md="8" :lg="6"
      >
        <el-card 
          shadow="hover" 
          class="function-card"
          @click="handleCardClick(card.path)"
        >
          <div class="card-icon">
            <i :class="card.icon" style="font-size: 36px"></i>
          </div>
          <h3>{{ card.title }}</h3>
          <p class="card-desc">{{ card.description }}</p>
          <div class="card-footer">
            <el-tag type="success">点击进入</el-tag>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 3. 数据概览区域 -->
    <el-divider />
    <el-row :gutter="20" class="data-overview">
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-statistic title="今日交易额" :value="stats.todayAmount" suffix="元" />
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-statistic title="待处理退款" :value="stats.pendingRefunds" />
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-statistic title="进行中项目" :value="stats.activeProjects" />
      </el-col>
      <el-col :xs="24" :sm="12" :md="8" :lg="6">
        <el-statistic title="系统健康度" :value="stats.healthStatus" precision="1" />
      </el-col>
    </el-row>

    <!-- 4. 底部信息模块 -->
    <el-divider />
    <el-row :gutter="20" class="footer-info">
      <!-- 联系信息 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>联系我们</span>
            </div>
          </template>
          <p><i class="el-icon-phone"></i> 客服热线：400-123-4567</p>
          <p><i class="el-icon-message"></i> 商务合作：business@example.com</p>
          <p><i class="el-icon-location"></i> 公司地址：XX市XX区科技园A座</p>
        </el-card>
      </el-col>

      <!-- 开发信息 -->
      <el-col :xs="24" :sm="12" :md="8" :lg="8">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>系统信息</span>
            </div>
          </template>
          <p>当前版本：v{{ version }}</p>
          <p>最后更新：2023-12-08</p>
          <p>技术支持：若依技术团队</p>
          <el-button 
            type="text" 
            icon="Document"
            @click="handleDocumentation"
          >
            查看技术文档
          </el-button>
        </el-card>
      </el-col>

      <!-- 快捷入口 -->
      <el-col :xs="24" :sm="24" :md="8" :lg="8">
        <el-card>
          <template #header>
            <div class="clearfix">
              <span>快捷入口</span>
            </div>
          </template>
          <el-space wrap>
            <el-button 
              v-for="(link, idx) in quickLinks" 
              :key="idx" 
              type="primary" 
              plain
              @click="handleCardClick(link.path)"
            >
              {{ link.title }}
            </el-button>
          </el-space>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const version = ref('1.0.0')

// 轮播图数据
const banners = ref([
  { 
    image: '/src/assets/images/banner/rsbanner1.jpg',
    title: '高效收款管理解决方案' 
  },
  { 
    image: '/src/assets/images/banner/rsbanner3.jpg',
    title: '实时交易监控与数据分析' 
  },
  { 
    image: '/src/assets/images/banner/rsbanner2.jpg',
    title: '安全稳定的支付处理系统' 
  }
])

// 功能卡片配置
const functionCards = ref([
  {
    title: '员工管理',
    icon: 'el-icon-user',
    description: '管理员工信息和权限分配',
    path: '/financialManagementSystem/employeesManage/employee'
  },
  {
    title: '项目管理',
    icon: 'el-icon-folder',
    description: '创建和管理收款项目',
    path: '/financialManagementSystem/programManage/businessSku'
  },
  {
    title: '订单管理',
    icon: 'el-icon-shopping-cart-full',
    description: '查看和处理交易订单',
    path: '/financialManagementSystem/ordersManage/businessOrder'
  },
  {
    title: '支付日志',
    icon: 'el-icon-money',
    description: '查询支付和退款记录',
    path: '/financialManagementSystem/paymentLogs/payLogs'
  },
  {
    title: '数据报表',
    icon: 'el-icon-data-analysis',
    description: '生成业务数据可视化报表',
    path: '/reports'
  },
  {
    title: '系统设置',
    icon: 'el-icon-setting',
    description: '配置系统参数和权限',
    path: '/settings'
  }
])

// 数据概览
const stats = ref({
  todayAmount: 12890.5,
  pendingRefunds: 12,
  activeProjects: 8,
  healthStatus: 99.5
})

// 快捷入口
const quickLinks = ref([
  { title: '创建新项目', path: '/financialManagementSystem/programManage/businessSku' },
  { title: '处理退款', path: '/financialManagementSystem/paymentLogs/refundInfo' },
  { title: '机构信息', path: '/financialManagementSystem/employeesManage/organization' },
  { title: '导出报表', path: '/employee/add' }
])

// 事件处理
const handleCardClick = (path) => {
  router.push(path)
}

const handleDocumentation = () => {
  window.open('https://doc.ruoyi.vip', '_blank')
}
</script>

<style scoped>
.home {
  padding: 20px;
}

/* 轮播图样式 */
.banner-image {
  width: 100%;
  height: 400px;
  object-fit: cover;
}
.banner-title {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  font-size: 24px;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.7);
}

/* 功能卡片样式 */
.function-cards {
  margin-top: 30px;
}
.function-card {
  height: 200px;
  cursor: pointer;
  transition: transform 0.3s;
}
.function-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
.card-icon {
  text-align: center;
  margin: 15px 0;
  color: #409EFF;
}
.card-desc {
  color: #909399;
  font-size: 13px;
  height: 40px;
  overflow: hidden;
}
.card-footer {
  margin-top: 15px;
  text-align: right;
}

/* 数据概览 */
.data-overview {
  margin: 30px 0;
}
.el-statistic {
  text-align: center;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 4px;
}

/* 底部信息 */
.footer-info {
  margin-top: 30px;
}
</style>